<!--  -->
<template>
  <div class="trade buy">
    <div class="quick-trade">
      <div class="left">
        <div class="title">快捷买卖</div>
        <div class="desc">简单快捷，0手续费</div>
      </div>
      <div class="right">
        <div class="select-box">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="select">
              <el-option label="按金额购买" value="1"></el-option>
              <el-option label="按数量购买" value="2"></el-option>
            </el-select>
          </el-input>
          <span class="slot-end">CNY</span>
        </div>
        <el-button class="btn" type="primary">购买USDT</el-button>
      </div>
    </div>
    <table class="trade-table">
      <thead>
        <tr>
          <th class="trade">卖家 (成交单数/完成率)</th>
          <th class="price">单价(CNY)</th>
          <th class="amount">数量(USDT)</th>
          <th class="limit">单笔限额(CNY)</th>
          <th class="pay">支付方式</th>
          <th class="operation">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list" :key="index">
          <td class="trade">{{item.merchant}}</td>
          <td class="price">{{item.price}}</td>
          <td class="amount">{{item.amount}}</td>
          <td class="limit">{{item.limit_min}}-{{item.limit_max}}</td>
          <td class="pay">
            <i class="iconfont icon-yinxingqia"></i>
            <i class="iconfont icon-wechat"></i>
            <i class="iconfont icon-iconfontrectangle390"></i>
          </td>
          <td class="operation">
            <el-button @click="drawer=true" type="primary" plain>购买USDT</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 订单抽屉 -->
    <el-drawer
      title="订单抽屉"
      :visible.sync="drawer"
      :close="handleClose"
      :with-header="false"
      class="drawer-box"
      customClass="customWidth"
    >
      <div class="detail-box">
        <h2 class="title">购买USDT</h2>
        <GeminiScrollbar :ops="ops" class="scoll-box">
          <div class="step-box">
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">下订单</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">去线下付款</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">点击已付款</span>
            </div>
            <em class="line"></em>
            <div class="item">
              <i class="iconfont icon-tijiao"></i>
              <span class="tips">等待放币</span>
            </div>
          </div>
          <div class="detail-info-box">
            <h2>委托单信息</h2>
            <ul class="list-box">
              <li>
                <span class="title">委托单号</span>
                <span class="content">200032</span>
              </li>
              <li>
                <span class="title">币种</span>
                <span class="content">USDT</span>
              </li>
              <li>
                <span class="title">单笔限额(CNY)</span>
                <span class="content">5,000 - 212,459.42</span>
              </li>
              <li>
                <span class="title">单价(CNY)</span>
                <span class="content">6.96</span>
              </li>
              <li>
                <span class="title">总金额(CNY)</span>
                <span class="content">212,459.42</span>
              </li>
              <li>
                <span class="title">数量(USDT)</span>
                <span class="content">30,525.78</span>
              </li>
            </ul>
          </div>
          <div class="detail-info-box">
            <h2>对手信息</h2>
            <ul class="list-box">
              <li>
                <span class="title">卖家姓名</span>
                <span class="content">小白菜专业商家</span>
              </li>
              <li>
                <span class="title">法币注册时间</span>
                <span class="content">2020-06-19</span>
              </li>
              <li>
                <span class="title">认证等级</span>
                <span class="content">v3</span>
              </li>
              <li>
                <span class="title">成交单数</span>
                <span class="content">2,016</span>
              </li>
              <li>
                <span class="title">完成率</span>
                <span class="content">99.35%</span>
              </li>
              <li>
                <span class="title">对手卖币单数</span>
                <span class="content">0</span>
              </li>
              <li>
                <span class="title">卖家提示</span>
                <span class="content">1、付款账号必须和OK的注册账户是同一个人，否则扣款举报； 2、付款信息中不要备注！不要备注！</span>
              </li>
              <li>
                <span class="title">平均放币时间</span>
                <span class="content">01′19″</span>
              </li>
            </ul>
          </div>
        </GeminiScrollbar>
      </div>

      <div class="form-box">
        <el-form
          :model="tradeForm"
          :rules="rules"
          ref="tradeForm"
          label-width="90px"
          class="trade-form"
          label-position="left"
        >
          <el-form-item label="数量" prop="sum">
            <el-input v-model="tradeForm.sum" placeholder="请输入购买数量"></el-input>
          </el-form-item>
          <el-form-item label="总金额" prop="money">
            <el-input v-model="tradeForm.money" placeholder="请输入购买金额"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button class="btn" @click="drawer=false">取消</el-button>
          <el-button type="primary" class="btn" @click="buyClick()">确认购买</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: "",
      input3: "",
      tradeForm: {},
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: "#80ffff ",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false
        }
      },
      list: [],
      drawer: false,
      rules: {
        sum: [{ required: true, message: "请输入交易数量", trigger: "blur" }],
        money: [{ required: true, message: "请输入交易金额", trigger: "blur" }]
      }
    };
  },
  created() {},
  mounted() {
    this.getDataList();
  },
  methods: {
    handleClose(done) {
      this.$refs["tradeForm"].resetFields();
      this.tradeForm = {};
      this.drawer = false;
    },
    buyClick() {
      this.$refs["tradeForm"].validate(valid => {
        if (valid) {
          this.$message.success("购买操作");
          this.drawer = false;
        } else {
          return false;
        }
      });
    },
    getDataList() {
      this.$api.otc.tradingOrders().then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    }
  }
};
</script>
<style lang="less">
/* 抽屉的样式，由于私有属性不能影响el-drawer */
.customWidth {
  width: 400px !important;
}
.drawer-box {
  .scoll-box {
    overflow-y: scroll;
    height: 65vh;
  }
  .detail-box {
    padding: 0 12px;

    .title {
      color: #4db872;
      font-size: 18px;
      line-height: 56px;
    }
    .step-box {
      padding: 16px 8px;
      box-sizing: border-box;
      width: 100%;
      background: #f8f9f9;
      border-radius: 2px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 16px;
        }
        .tips {
          font-size: 12px;
          margin-top: 8px;
        }
      }
      .line {
        background: rgba(235, 237, 240, 0.9);
        display: inline-block;
        height: 1px;
        width: 20px;
        position: relative;
      }
    }
    .detail-info-box {
      width: 100%;
      h2 {
        padding: 24px 0 12px;
        width: 100%;
        border-bottom: 1px solid rgba(235, 237, 240, 0.8);
        font-size: 16px;
        color: #000;
      }
      li {
        margin-top: 10px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;

        .title {
          min-width: 115px;
          color: rgba(0, 0, 0, 0.43);
          flex: 1;
          font-size: 13px;
          line-height: 15px;
        }
        .content {
          color: rgba(0, 0, 0, 0.85);
          flex: 1;
          word-break: break-word;
          line-height: 1.5;
          font-size: 13px;
        }
      }
    }
  }
  .form-box {
    padding: 15px;
    .btn-box {
      display: flex;
      justify-content: space-around;
      .btn {
        width: 159px;
      }
    }
  }
}
</style>